<template>
  <!-- 登录页面 -->
  <div
    class="loginbody"
    style="
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    "
  >
    <div
      class="login"
      style="display: flex; align-items: center; justify-content: center"
    >
      <div class="mylogin">
        <el-row
          style="display: flex; align-items: center; justify-content: center"
        >
          <h4>登录</h4>
        </el-row>
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-width="0px"
        >
          <el-form-item label="" prop="user_name" style="margin-top: 10px">
            <el-row>
              <el-col :span="2">
                <span class="el-icon-s-custom"></span>
              </el-col>
              <el-col :span="22">
                <el-input
                  class="inps"
                  placeholder="账号"
                  v-model="loginForm.user_name"
                >
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="" prop="user_password">
            <el-row>
              <el-col :span="2">
                <span class="el-icon-lock"></span>
              </el-col>
              <el-col :span="22">
                <el-input
                  class="inps"
                  type="password"
                  placeholder="密码"
                  v-model="loginForm.user_password"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item
            style="
              margin-top: 55px;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <el-button
              type="primary"
              round
              class="submitBtn"
              style="background-color: transparent; color: #39f; width: 200px"
              @click="login()"
              >登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { loginAPI } from "@/api/loginAPI.js";

export default {
  data() {
    return {
      // 表单，包含用户名和密码
      loginForm: {
        user_name: "",
        user_password: "",
      },
      // 验证规则
      loginRules: {
        user_name: [{ required: true, message: "请输入账号", trigger: "blur" }],
        user_password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 登录
    login() {
      this.$refs["loginForm"].validate(async (valid) => {
        if (valid) {
          const { data: res } = await loginAPI(
            this.$qs.stringify(this.loginForm)
          );
          // 登录成功
          if (res.flag) {
            this.$message.success("登录成功！");
            var list = this.$jsonToObj(res);
            var user = list[0];
            user.user_id = user.pk;
            window.sessionStorage.setItem("userInfo",JSON.stringify(user));
            this.$router.push({
             name:'MainView',
              query:{
                user_id : user.pk
              },
            })
          }
          // 登录失败
          else {
            this.$message.error("用户名或密码有误，请重试！");
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.mylogin {
  width: 240px;
  height: 280px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  opacity: 1;
  background: linear-gradient(
    230deg,
    rgba(53, 57, 74, 0) 0%,
    rgb(0, 0, 0) 100%
  );
}
.loginbody {
  overflow: scroll;
  overflow-y: hidden;
  overflow-x: hidden;
}
.login {
  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-position: left top;
  background-color: #242645;
  color: #fff;
  font-family: "Source Sans Pro";
  position: relative;
  background-image: url("../assets/beijing.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.el-table .num {
  background-color: blue;
}
.p {
  word-break: break-all;
  word-wrap: break-word;
}
</style>
